<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单进度管理大屏</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <script src="js/echarts.min.js" charset="utf-8"></script>
</head>
<body>
<div class="title">
    <h1>订单进度管理大屏</h1>
</div>
<div class="left-btn">
    <ul>
        <li>订单</li>
        <li><a href="https://google.com" target="_blank">工单</a></li>
        <li>库存</li>
        <li>产品</li>
    </ul>
</div>
<div class="right-btn">
    <ul>
        <li>订单</li>
        <li>工单</li>
        <li id="fullscreen">全屏展示</li>
        <li id="setBtn">设置</li>
    </ul>
</div>
<div class="box-one">
    <div class="content">
        <div class="title-item">标题</div>
        <div id="box1" class="chart-box"></div>
    </div>
</div>
<div class="box-two">
    <div class="contentTwo">
        <div class="item-box1">
            <div class="data-box">
                <div class="data-box-title">在制订单数量</div>
                <div class="data-box-val">11</div>
            </div>
            <div class="data-box">
                <div class="data-box-title">加急订单数量</div>
                <div class="data-box-val">22</div>
            </div>
            <div class="data-box">
                <div class="data-box-title">逾期订单数量</div>
                <div class="data-box-val">33</div>
            </div>
        </div>
        <div class="item-box2">
            <div class="data-box">
                <div class="data-box-title">加急工单数量</div>
                <div class="data-box-val">66</div>
            </div>
            <div class="data-box">
                <div class="data-box-title">预警工单数量</div>
                <div class="data-box-val">77</div>
            </div>
            <div class="data-box">
                <div class="data-box-title">逾期工单数量</div>
                <div class="data-box-val">88</div>
            </div>
        </div>
        <div class="item-box3">4</div>
        <div class="item-box4">5</div>
    </div>
</div>
<div class="box-three">
    <div class="content">
        <div class="title-item">标题</div>
        <div id="box3" class="chart-box"></div>
    </div>
</div>
<div class="box-four">
    <div class="content">
        <div class="title-item">标题</div>
        <div id="box4" class="chart-box"></div>
    </div>
</div>
<div class="box-five">
    <div class="content">
        <div class="title-item">标题</div>
        <div id="box5" class="chart-box"></div>
    </div>
</div>
<div class="box-six">
    <div class="content">
        <div class="title-item">标题</div>
        <div id="box6" class="chart-box"></div>
    </div>
</div>
<div class="box-seven">
    <div class="content">
        <div class="title-item">工单生产进度总览</div>
        <div class="table-box">
            <table>
                <thead>
                <tr>
                    <th>工单编号</th>
                    <th>工单状态</th>
                    <th>产品名称</th>
                    <th>产品料号</th>
                    <th>计划数量/完成数量</th>
                    <th>生产进度</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<div class="box-nine">
    <div class="content">
        <div class="title-item">标题</div>
        <div id="box9" class="chart-box"></div>
    </div>
</div>

<script src="./js/script.js"></script>
<script src="js/initChart.js"></script>
</body>
</html>